<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
    <!-- 在 Leaflet 中，map panes 隐式地将图层组合在一起 -->
    <!-- Map panes 使用 z-index CSS 属性来让某些图层始终显示在其他图层之上。默认的排序是：

    TileLayer 和 GridLayer
    Path, 如线、折线、圆或 GeoJSON 图层
    Marker 阴影
    Marker 图标
    Popup -->
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      // L.SVGOverlay 用于在地图的特定边界上加载、显示和提供对 SVG 文件的 DOM 访问。
    </script>
  </body>
</html>
